<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="__PUBLIC__/asset/css/common.css">
    <link href="__PUBLIC__/asset/css/animate.css" rel="stylesheet" type="text/css" media="all">
    <link href="__PUBLIC__/asset/lib/bootstrap/bootstrap.css" rel="stylesheet" type="text/css" media="all">
    <title>{:L('partners_title')}</title>
    <style>
        /* 翻译测试功能 */
        body {
            top: revert !important
        }

        .skiptranslate iframe {
            display: none;
        }

        .about-btn {
            position: fixed;
            top: 100px;
            right: 100px;
            width: 10vw;
            height: 10vw;
            z-index: 999;
        }

        .row {
            margin: 0 auto;
        }

        .about-item {
            padding: 8vh 0;
            border-bottom: 1px solid #e4e4e4;
            /* height: calc(35vh + 5vw); */
            display: flex;
            align-items: center;
        }

        .about-left {
            flex: 2;
            padding-top: 8vh;
            height: fit-content;
        }

        .about-left img {
            width: 60%;
        }

        .about-right {
            flex: 3;
            box-sizing: border-box;
            background-image: url("__PUBLIC__/asset/image/partners/1.png");
            background-repeat: no-repeat;
            background-size: 100% auto;
            padding: 16vh 0 30px;
        }

        .about-item:nth-child(2) .about-right {
            background-image: url("__PUBLIC__/asset/image/partners/2.png");
        }

        .about-item:nth-child(3) .about-right {
            background-image: url("__PUBLIC__/asset/image/partners/3.png");
        }

        .about-item:nth-child(4) .about-right {
            background-image: url("__PUBLIC__/asset/image/partners/4.png");
        }

        .about-item:nth-child(5) .about-right {
            background-image: url("__PUBLIC__/asset/image/partners/5.png");
        }

        .about-item:nth-child(6) .about-right {
            background-image: url("__PUBLIC__/asset/image/partners/6.png");
        }

        .about-item:nth-child(7) .about-right {
            background-image: url("__PUBLIC__/asset/image/partners/7.png");
        }

        .about-item:nth-child(8) .about-right {
            background-image: url("__PUBLIC__/asset/image/partners/8.png");
        }

        .right-info {
            width: 100%;
            padding: 0 5vh;
        }

        .right-title {
            font-size: calc(30px + 0.5vw);
            margin-bottom: 20px;
        }

        .right-info-text {
            font-size: 18px;
            color: var(--geryColor);
            font-family: "PuHu"
        }

        @media screen and (max-width:1600px) {
            .about-item {
                height: calc(55vh + 5vw);
            }
        }

        @media screen and (max-width:1400px) {
            .about-box {
                margin-top: 7rem;
            }

        }

        @media screen and (max-width:1200px) {
            .about-item {
                padding: 2vh 2vh 4vh;
                flex-direction: column;
                height: fit-content;
            }

            .about-left {
                padding: 0;
                flex: 0;
            }

            .about-left img {
                width: 30vw;
            }

            .about-right {
                width: 100%;
            }

            .right-info {
                padding: 2vh 20px 4vh;
            }
        }

        @media screen and (max-width:768px) {
            .about-right {
                padding-top: 10vh;
            }

            .right-info {
                padding: 5vh 20px;
                background-color: #f6f6f6;
            }

            .about-left img {
                width: 50vw;
            }
        }
    </style>
</head>

<body>
    <div class="header"></div>
    <div class="about-box">
        <div class="about-btn" id="transform-btn"></div>
        <div class="common-top wow fadeInUp">
            <img src="__PUBLIC__/asset/image/partners/top.jpg" alt="">
        </div>
        <div class="about-list row middle-box">
            <div class="about-item col-lg-12">
                <div class="about-left wow fadeInUp">
                    <img src="__PUBLIC__/asset/image/common/company/aws.png" alt="">
                </div>
                <div class="about-right wow fadeInUp" data-wow-delay="0.5s">
                    <div class="right-info">
                        <div class="right-title">{:L('partners_content_1')}</div>
                        <div class="right-info-text">
                            {:L('partners_content_2')}
                        </div>
                    </div>
                </div>
            </div>
            <div class="about-item col-lg-12">
                <div class="about-left wow fadeInUp">
                    <img src="__PUBLIC__/asset/image/common/company/googleCloud.png" alt="">
                </div>
                <div class="about-right wow fadeInUp" data-wow-delay="0.5s">
                    <div class="right-info">
                        <div class="right-title">{:L('partners_content_3')}</div>
                        <div class="right-info-text">
                            {:L('partners_content_4')}
                        </div>
                    </div>
                </div>
            </div>
            <div class="about-item col-lg-12">
                <div class="about-left wow fadeInUp">
                    <img src="__PUBLIC__/asset/image/common/company/azure.png" alt="">
                </div>
                <div class="about-right wow fadeInUp" data-wow-delay="0.5s">
                    <div class="right-info">
                        <div class="right-title">{:L('partners_content_5')}</div>
                        <div class="right-info-text">
                            {:L('partners_content_6')}
                        </div>
                    </div>
                </div>
            </div>
            <div class="about-item col-lg-12">
                <div class="about-left wow fadeInUp">
                    <img src="__PUBLIC__/asset/image/common/company/alibaba.png" alt="">
                </div>
                <div class="about-right wow fadeInUp" data-wow-delay="0.5s">
                    <div class="right-info">
                        <div class="right-title">{:L('partners_content_7')}</div>
                        <div class="right-info-text">
                            {:L('partners_content_8')}
                        </div>
                    </div>
                </div>
            </div>
            <div class="about-item col-lg-12">
                <div class="about-left wow fadeInUp">
                    <img src="__PUBLIC__/asset/image/common/company/tenxun.png" alt="">
                </div>
                <div class="about-right wow fadeInUp" data-wow-delay="0.5s">
                    <div class="right-info">
                        <div class="right-title">{:L('partners_content_9')}</div>
                        <div class="right-info-text">
                            {:L('partners_content_10')}
                        </div>
                    </div>
                </div>
            </div>
            <div class="about-item col-lg-12">
                <div class="about-left wow fadeInUp">
                    <img src="__PUBLIC__/asset/image/common/company/huawei.png" alt="">
                </div>
                <div class="about-right wow fadeInUp" data-wow-delay="0.5s">
                    <div class="right-info">
                        <div class="right-title">{:L('partners_content_11')}</div>
                        <div class="right-info-text">
                            {:L('partners_content_12')}
                        </div>
                    </div>
                </div>
            </div>
            <div class="about-item col-lg-12">
                <div class="about-left wow fadeInUp">
                    <img src="__PUBLIC__/asset/image/common/company/cloudflare.jpg" alt="">
                </div>
                <div class="about-right wow fadeInUp" data-wow-delay="0.5s">
                    <div class="right-info">
                        <div class="right-title">{:L('partners_content_13')}</div>
                        <div class="right-info-text">
                            {:L('partners_content_14')}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer"></div>
</body>

</html>
<!-- <script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> -->
<script src="__PUBLIC__/asset/lib/jquery_3.2.1.min.js"></script>
<script src="__PUBLIC__/asset/lib/bootstrap/bootstrap.js"></script>
<script src="__PUBLIC__/asset/lib/wow/wow.min.js"></script>
<script src="__PUBLIC__/asset/js/common.js"></script>
<script>
    new WOW().init()
    $(document).ready(function () {

        // function addGoogleTranslation() {
        //     new google.translate.TranslateElement({
        //         pageLanguage: 'zh-CN',
        //         defaultLanguage:'zh-CN',
        //         includedLanguages: 'en,zh-CN,zh-TW'
        //     }, 'transform-btn')
        // }
        // addGoogleTranslation()
    })
</script>